
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>User Profile</title>
    <link type="text/css" href="../Scripts/css/smoothness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="../Scripts/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../Scripts/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../Scripts/js/jquery-ui-1.8.11.custom.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // Datepicker
            for(var i=0;i<=5;i++){
                $('#datepicker'+i).datepicker({
                    changeMonth: true,
                    changeYear: true
                });
                //datepicker formating
                $( "#datepicker"+i ).datepicker( "option", "dateFormat", 'yy-mm-dd');
            }
            //using the tabs for different categories of information
            $( "#tabs" ).tabs();//for profileInfo page
            $( "#tabsForEvent" ).tabs();//for event page
            //add text boxes dynamically
            var counter = 2;
            $("#addHost").click(function () {
                
                //                 alert("Only 10 textboxes allow");
                //                if(counter>10){
                //                    alert("Only 10 textboxes allow");
                //                    return false;
                //                }

                var newTextBoxDiv = $(document.createElement('div'))
                .attr("id", 'HostTbDiv' + counter);

                newTextBoxDiv.after().html('<label>Host '+ counter + ': </label>' +
                    '<input type="text" name="tbHost' + counter +
                    '" id="tbHostId' + counter + '" value="" >');

                newTextBoxDiv.appendTo("#TextBoxesGroupHost");


                counter++;
            });
            //remove text boxes dynamically
            $("#removeHost").click(function () {
                if(counter==1){
                    alert("No more textbox to remove");
                    return false;
                }

                counter--;

                $("#HostTbDiv" + counter).remove();

            });

            var counterp = 2;
            $("#addp").click(function () {

                //                 alert("Only 10 textboxes allow");
                if(counterp>10){
                    alert("Only 10 textboxes allow");
                    return false;
                }

                var newTextBoxDiv = $(document.createElement('div'))
                .attr("id", 'ParticipantsTbDiv' + counterp);

                newTextBoxDiv.after().html('<label>Participant '+ counterp + ': </label>' +
                    '<input type="text" name="tbParticipants' + counterp +
                    '" id="tbParticipantsId' + counterp + '" value="" >');

                newTextBoxDiv.appendTo("#TextBoxesGroupParticipants");


                counterp++;
            });
            //remove text boxes dynamically
            $("#removep").click(function () {
                if(counterp==1){
                    alert("No more textbox to remove");
                    return false;
                }

                counterp--;

                $("#ParticipantsTbDiv" + counterp).remove();

            });

//            for(var i=1;i<1000;i++){
//                //open pop-dialog
//                $( "#dialog"+i ).dialog({
//                    autoOpen: false,
//                    show: "blind",
//                    hide: "explode"
//                });
//
//                $( "#opener" +i).click(function() {
//                    $( "#dialog"+i).dialog( "open" );
//                    return false;
//                });
//            }
           
            
            // to load the data before initializing datapicker
            if( document.getElementsByName('DOB').length == 1 ){
                document.getElementById('datepicker1').value = '${userInfo.DOB}';
            }
            if(( document.getElementsByName('enrollmentDay').length == 1 )){
                document.getElementById('datepicker2').value = '${userInfo.DOB}';
            }
            if(( document.getElementsByName('workDay').length == 1 )){
                document.getElementById('datepicker3').value = '${userInfo.DOB}';
            }
        });
    </script>
